<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .hd{
            color: red;
        }
    </style>
</head>
<body>
    <h2 class="hd">admin</h2>
    <script type="text/javascript" src="01.js"></script>
    <script>
        // 定时器1后放到宏任务队列中 后执行
        setTimeout(() => {
            console.log('定时器1');
        }, 2000);
        // 定时器2 先放到宏任务队列中 先执行
        setTimeout(() => {
            console.log('定时器2');
        }, 1000);

        new Promise(resolve=>{
            // 同步执行代码
            console.log('同步执行代码1');
            resolve();
        })
        // promise .then()中的放入微任务队列中 比宏任务队列中的任务先执行
        Promise.resolve().then(()=>{
            // 定时器3延时1000按顺序放到定时器2的后面执行
            setTimeout(() => {
                 console.log('定时器3');
            }, 1000);
            // 微任务中同步代码先执行
            console.log('promise.......');
        })
        // 同步代码优先执行 如果同步代码与微任务执行时间已经大于了定时器等待时间 当同步代码及微任务执行完成后 定时器立即执行
        console.log('同步执行代码2');
        // 同步执行代码
        for(let i=0;i<5000;i++){
            console.log('');
        }
        // 同步执行代码1 ---> 同步执行代码2---> 5000个空格---> promise..... ---> 定时器2 ---> 定时器3 ---> 定时器1
         
    </script>
</body>
</html>